<template>
    <view class="u-footer" :class="[fixed ? 'u-fixed' : '']" :style="{ backgroundColor: bgColor }">
        <slot />
        <view class="u-footer-copyright" :style="{ color: color, fontSize: size + 'rpx' }">
            {{ copyright }}
        </view>
    </view>
</template>
<script lang="ts" setup>
    /**
     * 页脚
     * @description 该组件一般用于页面底部
     */
    import { custom_props } from '../../libs/mixin/minxs';
    const props = defineProps({
        ...custom_props,
        // 底部文本
        copyright: {
            type: String,
            default: 'All Rights Reserved.',
        },
        // copyright 字体颜色
        color: {
            type: String,
            default: '#A7A7A7',
        },
        // copyright 字体大小
        size: {
            type: Number,
            default: 24,
        },
        // footer背景颜色
        bgColor: {
            type: String,
            default: 'transparent',
        },
        // 是否固定在底部
        fixed: {
            type: Boolean,
            default: false,
        },
    });
</script>
<style lang="scss" scoped>
    .u-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        /* #ifndef APP-NVUE */
        width: 100%;
        box-sizing: border-box;
        word-break: break-all;
        /* #endif */
        padding: 32 rpx;
    }

    .u-fixed {
        position: fixed;
        z-index: 99;
        bottom: 0;
        left: 0;
        right: 0;
        /* #ifndef APP-NVUE */
        left: constant(safe-area-inset-left);
        left: env(safe-area-inset-left);
        right: constant(safe-area-inset-right);
        right: env(safe-area-inset-right);
        /* #endif */
    }

    .u-footer-link {
        color: #596d96;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
    }

    .u-link {
        position: relative;
        padding: 0 18rpx;
        line-height: 1;
    }

    .u-link::before {
        content: ' ';
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        bottom: 0;
        border-right: 1px solid #d3d3d3;
        transform-origin: 100% 0;
        transform: scaleX(0.5);
    }

    .u-link:last-child::before {
        border-right: 0 !important;
    }

    .u-link-hover {
        opacity: 0.5;
    }

    .u-footer-copyright {
        font-size: 24rpx;
        color: #a7a7a7;
        line-height: 1;
        text-align: center;
        padding-top: 16rpx;
        padding-bottom: env(safe-area-inset-bottom);
    }
</style>
